<template>
  <li
    :style="{ color: selfIndex === activeIndex ? activeColor : inactiveColor }"
    v-index
    @click="handleClick"
  >
    <slot name="icon" :active="selfIndex === activeIndex"></slot>
    <slot></slot>
  </li>
</template>

<script>
  export default {
    props: ['to'],

    data() {
      return {
        selfIndex: 0,
        activeColor: '',
        inactiveColor: ''
      }
    },

    directives: {
      index: {
        inserted(el, bindings, vnode) {
          const parent = el.parentNode
          for (let i = 0, len = parent.childNodes.length; i < len; i++ ) {
            if (parent.childNodes[i] === el) {
              vnode.context.selfIndex = i
            }
          }
        }
      }
    },

    methods: {
      handleClick() {
        this.$parent.changeValue(this.selfIndex)

        if (this.$parent.route) {
          this.$router.push(this.to)
        }
      }
    },

    computed: {
      activeIndex() {
        return this.$parent.value
      }
    },

    mounted() {
      const { activeColor, inactiveColor } = this.$parent
      this.activeColor = activeColor
      this.inactiveColor = inactiveColor
    }
  }
</script>

<style lang="scss" scoped>
@import '@/assets/border.scss';
li {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  img {
    width: .2rem;
    height: .2rem;
  }
  @include border_1px(1px 0 0 0);
  font-size: .1rem;
}
</style>